<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Customize Columns of PropertyGrid - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="../../../../js/lib/jquery-easyui-v1.5.1/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../../js/lib/jquery-easyui-v1.5.1/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../demo.css">
		<script type="text/javascript" src="../../../../js/lib/jquery-easyui-v1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="../../../../js/lib/jquery-easyui-v1.5.1/jquery.easyui.min.js"></script>
	</head>

	<body>
		<h2>Customize Columns of PropertyGrid</h2>
		<p>The columns of PropertyGrid can be changed.</p>
		<div style="margin:20px 0;"></div>
		<table class="easyui-propertygrid" style="width:300px" data-options="
				url: '../data/propertygrid_data1.json',
				method: 'get',
				showGroup: true,
				scrollbarSize: 0,
				columns: mycolumns
			">
		</table>
		<script>
			var mycolumns = [
				[{
						field: 'name',
						title: 'MyName',
						width: 100,
						sortable: true
					},
					{
						field: 'value',
						title: 'MyValue',
						width: 100,
						resizable: false
					}
				]
			];
		</script>
	</body>

</html>